<template>
  <div>
    <div>


      <div class="head">
        <el-form inline label-width="120px" size="small"
        >
          <el-form-item>
            <el-input placeholder="请输入角色名称" v-model="selectData.roleTitle" @keyup.enter.native="searchData"
                      style="width: 200px">
            </el-input>
          </el-form-item>


          <el-form-item>
            <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
            <el-button plain type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
          </el-form-item>
        </el-form>
        <div>
          <!-- 新增 -->
          <el-button size="small" plain type="primary" icon="el-icon-plus" @click="open_dialog('add')">新增<i
              class="el-icon--right"></i>
          </el-button>
        </div>
      </div>
    </div>
    <el-table :data="tableData" border v-loading="loading" empty-text="暂无数据">
      <el-table-column label="角色编号" width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roleId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.roleTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button plain size="mini" type="success"
                     @click="handleCommand('edit',scope.row)">编辑
          </el-button>
          <el-button plain size="mini"
                     type="danger" @click="handleCommand('del', scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <role-detail
        :dialogVisible.sync="dialogVisible"
        :type="type"
        :editId="editId"
        @submit="resetData"
    />
  </div>
</template>

<script>
import {role_page, role_del} from "@/api/sysrole";
import roleDetail from "./module/role-detail";

export default {
  components: {
    roleDetail: roleDetail
  },
  data() {
    return {
      editId: 0,
      dialogVisible: false,
      type: "add",
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectData: {
        roleTitle: ""
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    /**
     * 事件切换
     */
    handleCommand(cmd, data) {
      if (cmd === 'edit') {
        this.open_dialog('edit', data.roleId)
      }
      if (cmd === 'del') {

        this.delRole({id: data.roleId})
      }
    },
    clearForm() {
      this.selectData = {};
      this.getData();
    },
    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getData();
    },
    /**
     * 重新获取数据
     */
    resetData() {
      this.dialogVisible = false;
      this.getData();
    },
    /**
     * 打开弹窗
     */
    open_dialog(type, editId) {
      this.dialogVisible = true;
      this.type = type;
      this.editId = editId;
    },
    searchData() {
      this.currentPage = 1;
      this.getData();
    },
    /**
     * 删除用户
     *
     */
    delRole(id) {
      this.$confirm("是否删除该角色?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        role_del(id).then(res => {
          if (res.status === 200) {
            this.$message.success("删除成功");
            this.currentPage = 1;
            this.getData();
          }
        });
      });
    },
    /**
     * 获取分页数据
     */
    getData() {
      this.loading = true;
      let params = {};
      params.pageNumber = this.currentPage;
      params.pageSize = this.pageSize;
      params.roleTitle = this.selectData.roleTitle;
      role_page(params).then(res => {
        if (res.status === 200) {
          this.loading = false;
          this.tableData = res.data.list;
          this.total = Number.parseInt(res.data.total);
        }

      });
    }
  }
};
</script>

<style lang="less">
</style>
